<!-- 这样样例主要是vue函数的使用 -->
<html>

<head>

</head>

<body>
    <div id="app">
        <div>当前计数：{{number}}</div>
        <!-- <button v-on:click="number++">+</button>
            <button v-on:click="number--">-</button> -->
        <!-- 事件标准写法 -->
        <button v-on:click="addition">+</button>
        <!-- 事件语法糖 -->
        <button @click="subtraction">-</button>
    </div>
    <script src="__STATIC__/plugins/vue/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            //声明数据
            data: {
                number: 0
            },
            //声明函数
            methods: {
                addition: function () {
                    console.log('加法被执行');
                    //拿app的变量
                    this.number++;
                },
                subtraction: function () {
                    if (this.number <= 0) {
                        console.log('已经到底了，不要再减了');
                        return;
                    }
                    console.log('减法被执行');
                    this.number--
                }
            }
        })
    </script>
</body>

</html>